<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>短信平台</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="robots" content="all,follow">
    <!-- Bootstrap CSS-->
    <link rel="stylesheet" th:href="@{/vendor/bootstrap/css/bootstrap.min.css}">
    <!-- Font Awesome CSS-->
    <link rel="stylesheet" th:href="@{/vendor/font-awesome/css/font-awesome.css}">
    <!-- Fontastic Custom icon font-->
    <link rel="stylesheet" th:href="@{/css/fontastic.css}">
    <!-- Google fonts - Roboto -->
    <!--<link rel="stylesheet" th:href="@{https://fonts.googleapis.com/css?family=Roboto:300,400,500,700}">-->
    <!-- jQuery Circle-->
    <link rel="stylesheet" th:href="@{/css/grasp_mobile_progress_circle-1.0.0.min.css}">
    <!-- Custom Scrollbar-->
    <link rel="stylesheet" th:href="@{/vendor/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.css}">
    <!-- theme stylesheet-->
    <link rel="stylesheet" th:href="@{/css/style.blue.css}" id="theme-stylesheet">
    <!-- Custom stylesheet - for your changes-->
    <link rel="stylesheet" th:href="@{/css/custom.css}">
    <!--toastr-->
    <link rel="stylesheet" th:href="@{/css/toastr.css}">
    <!-- Favicon-->
    <link rel="shortcut icon" th:href="@{/img/favicon.ico}">
    <!-- Tweaks for older IEs--><!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]-->
    <link rel="stylesheet" th:href="@{/css/zTree/zTreeStyle/bootstrapStyle.css}" type="text/css">
    <meta name="_csrf" th:content="${_csrf.token}"/>
    <meta name="_csrf_header" th:content="${_csrf.headerName}"/>
</head>
<style>
    input.error {
        border: 1px solid red;
    }

    label.error {
        font-weight: bold;
        color: red;
    }

    .help-block {
        color: red;
    }
</style>
<!-- JavaScript files-->
<!-- JavaScript files-->
<script type="text/javascript" th:src="@{/js/jquery.js}"></script>
<script type="text/javascript" th:src="@{/vendor/popper.js/umd/popper.min.js}"></script>
<script th:src="@{/vendor/bootstrap/js/bootstrap.min.js}"></script>
<script th:src="@{/js/grasp_mobile_progress_circle-1.0.0.min.js}"></script>
<script th:src="@{/vendor/jquery.cookie/jquery.cookie.js}"></script>
<script th:src="@{/vendor/chart.js/Chart.min.js}"></script>
<script th:src="@{/vendor/jquery-validation/jquery.validate.min.js}"></script>
<script th:src="@{/vendor/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.concat.min.js}"></script>
<script th:src="@{/js/charts-home.js}"></script>
<script th:src="@{/js/bootstrapValidator.min.js}"></script>
<!-- Main File-->
<script th:src="@{/js/front.js}"></script>
<script th:src="@{/js/toastr.min.js}"></script>
<script th:src="@{/js/base.js}"></script>
<script type="text/javascript" th:src="@{/js/zTree/jquery.ztree.core.js}"></script>
<script type="text/javascript" th:src="@{/js/zTree/jquery.ztree.excheck.js}"></script>
<script type="text/javascript" th:src="@{/js/zTree/jquery.ztree.exedit.js}"></script>
<body>
<!-- Side Navbar -->
<div th:replace="~{/pages/common/side_navbar.html}"></div>
<div class="page">
    <!-- navbar-->
    <div th:replace="~{/pages/common/header_navbar.html}"></div>

    <!--页码代码-->
    <!-- Breadcrumb-->
    <div class="breadcrumb-holder">
        <div class="container-fluid">
            <ul class="breadcrumb">
                <li class="breadcrumb-item"><a href="#">系统管理</a></li>
                <li class="breadcrumb-item active">组织管理</li>
            </ul>
        </div>
    </div>
    <section>
        <div class="container-fluid">
            <!-- Page Header-->
            <div class="row mt-3">
                <div class="col-lg-4 grid-margin stretch-card">
                    <div class=" d-flex align-items-center">
                        <button type="button" class="btn btn-success ml-2  expandAll">全部展开</button>
                        <button type="button" class="btn btn-success ml-2  pickupAll">全部收起</button>
                    </div>
                    <div class="zTreeDemoBackground">
                        <input type="hidden" th:value="${orgTree}" id="orgTreeData">
                        <ul id="treeDemo" class="ztree"></ul>
                    </div>
                </div>
                <div class="col-lg-8 grid-margin stretch-card">
                    <div class="card">


                        <!--数据字段-->
                        <div class="card-body">
                            <form class="form-horizontal bv-form" action="#" method="post" id="orgInfoForm">
                                <div class="form-group row">
                                    <label class="col-sm-2 form-control-label">组织名称 <em
                                            style="color: red;">*</em></label>
                                    <div class="col-sm-6">
                                        <input type="hidden" value="" name="orgId" id="orgId"/>
                                        <input type="hidden" value="" name="orgParentId" id="orgParentId"/>
                                        <input type="text" placeholder="" value="" name="orgName" id="orgName"
                                               class="form-control"/>
                                    </div>
                                </div>
                                <div class="line"></div>

                                <div class="form-group row">
                                    <label class="col-sm-2 form-control-label">组织编码 </label>
                                    <div class="col-sm-6">
                                        <input type="text" placeholder="" value="" name="orgCode" id="orgCode"
                                               class="form-control"/>
                                    </div>
                                </div>
                                <div class="line"></div>

                                <div class="form-group row">
                                    <label class="col-sm-2 form-control-label">组织地址 </label>
                                    <div class="col-sm-6">
                                        <input type="text" placeholder="" value="" name="orgAddress" id="orgAddress"
                                               class="form-control"/>
                                    </div>
                                </div>
                                <div class="line"></div>

                                <div class="form-group row">
                                    <label class="col-sm-2 form-control-label">联系电话 </label>
                                    <div class="col-sm-6">
                                        <input type="text" placeholder="" value="" name="orgPhone" id="orgPhone"
                                               class="form-control"/>
                                    </div>
                                </div>
                                <div class="line"></div>
                                <div class="form-group row">
                                    <label class="col-sm-2 form-control-label">组织排序 </label>
                                    <div class="col-sm-6">
                                        <input type="text" placeholder="" value="" name="orgOrder" id="orgOrder"
                                               class="form-control"/>
                                    </div>
                                </div>
                                <div class="line"></div>


                                <div class="form-group row">
                                    <label class="col-sm-2 form-control-label">组织层级<em style="color: red;">*</em>
                                    </label>
                                    <div class="col-sm-6">
                                        <input type="text" placeholder="" value="" name="orgLevel" id="orgLevel"
                                               class="form-control"/>
                                    </div>
                                </div>
                                <div class="line"></div>

                                <div class="form-group row">
                                    <div class="col-sm-6 offset-sm-2">
                                        <!--  <button type="button" class="btn btn-success ml-2 addSubOrg invisible">添加子组织
                                          </button>
                                          <button type="button" class="btn btn-danger ml-2 delOrg invisible "
                                                  data-toggle="modal" data-target="#modalCenter">删除
                                          </button>
                                          <button type="submit" class="btn btn-success ml-2 updateOrg invisible">修改
                                          </button>
                                          <button type="submit" class="btn btn-success ml-2 saveOrg">保存</button>-->
                                    </div>

                                </div>
                            </form>
                        </div>


                        <!--子组织信息-->
                        <div class="card-body invisible " id="subOrgInfo">
                            <form class="form-horizontal" action="#" method="post" id="subOrgInfoForm">
                                <div class="form-group row">
                                    <label class="col-sm-2 form-control-label">子组织名称 <em
                                            style="color: red;">*</em></label>
                                    <div class="col-sm-6">
                                        <input type="text" placeholder="" value="" name="subOrgName" id="subOrgName"
                                               class="form-control"/>
                                    </div>
                                </div>
                                <div class="line"></div>

                                <div class="form-group row">
                                    <label class="col-sm-2 form-control-label">子组织编码 </label>
                                    <div class="col-sm-6">
                                        <input type="text" placeholder="" value="" name="subOrgCode" id="subOrgCode"
                                               class="form-control"/>
                                    </div>
                                </div>
                                <div class="line"></div>

                                <div class="form-group row">
                                    <label class="col-sm-2 form-control-label">子组织地址 </label>
                                    <div class="col-sm-6">
                                        <input type="text" placeholder="" value="" name="subOrgAddress"
                                               id="subOrgAddress" class="form-control"/>
                                    </div>
                                </div>
                                <div class="line"></div>

                                <div class="form-group row">
                                    <label class="col-sm-2 form-control-label">联系电话 </label>
                                    <div class="col-sm-6">
                                        <input type="text" placeholder="" value="" name="subOrgPhone" id="subOrgPhone"
                                               class="form-control"/>
                                    </div>
                                </div>
                                <div class="line"></div>
                                <div class="form-group row">
                                    <label class="col-sm-2 form-control-label">子组织排序 </label>
                                    <div class="col-sm-6">
                                        <input type="text" placeholder="" value="" name="subOrgOrder" id="subOrgOrder"
                                               class="form-control"/>
                                    </div>
                                </div>
                                <div class="line"></div>


                                <div class="form-group row">
                                    <label class="col-sm-2 form-control-label">子组织层级 <em
                                            style="color: red;">*</em></label>
                                    <div class="col-sm-6">
                                        <input type="text" placeholder="" value="" name="subOrgLevel" id="subOrgLevel"
                                               class="form-control"/>
                                    </div>
                                </div>
                                <div class="line"></div>

                                <div class="form-group row">
                                    <div class="col-sm-6 offset-sm-2">
                                        <button type="button" class="btn btn-secondary  ml-3 cancelSubOrg">取消</button>
                                        <button type="submit" class="btn btn-success ml-3 saveSubOrg">保存</button>
                                    </div>

                                </div>
                            </form>
                        </div>

                    </div>
                </div>

            </div>
        </div>
    </section>

    <!--页码-->
    <div th:replace="~{/pages/common/foot.html}"></div>
</div>

<!-- Modal -->
<div class="modal fade" id="modalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle"
     aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalCenterTitle">删除</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body ">
                <input value="" class="del_org_id" type="hidden">
                <p class="del_message"></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary delSure" data-dismiss="modal">确定</button>
            </div>
        </div>
    </div>
</div>
</body>
<script type="text/javascript">
    /*设置默认首页 调整菜单选中*/
    $(function () {
        debugger;
        var menuCheck = sessionStorage.getItem("menuCheckedId");
        var menuSubCheck = sessionStorage.getItem("menuSubCheckedId");
        var hasSub = sessionStorage.getItem("hasSub");
        //清除原来样式
        if (menuSubCheck != '8a808ecb6f896168016f8968090c0004') {
            if (hasSub == 0) {
                $('#' + menuCheck).removeAttr("style", "");
            } else {
                var $menu = $('#' + menuCheck);
                $menu.attr("aria-expanded", false);
                $menu.nextAll().addClass("hide")
                console.log("subId=" + menuSubCheck);
                $('#' + menuSubCheck).removeAttr("style", "");
            }
            sessionStorage.setItem("menuCheckedId", "8a808eb96f401fa2016f401fbe9f0000");
            sessionStorage.setItem("menuSubCheckedId", "8a808ecb6f896168016f8968090c0004");
            sessionStorage.setItem("hasSub", 1);
            var $menu = $('#8a808eb96f401fa2016f401fbe9f0000');
            $menu.attr("aria-expanded", true);
            $menu.nextAll().addClass("show")
            $('#8a808ecb6f896168016f8968090c0004').attr("style", "background-color:#28a745");
        }

    })


</script>

<script type="text/javascript">
    toastr.options = {
        closeButton: false, //是否显示关闭按钮（提示框右上角关闭按钮）；
        debug: false, //是否为调试；
        progressBar: false, //是否显示进度条（设置关闭的超时时间进度条）
        positionClass: "toast-top-center", //消息框在页面显示的位置
        onclick: null, //点击消息框自定义事件
        showDuration: "300", //显示动作时间
        hideDuration: "1000", //隐藏动作时间
        timeOut: "2000", //自动关闭超时时间
        extendedTimeOut: "1000",
        showEasing: "swing",
        hideEasing: "linear",
        showMethod: "fadeIn",
        hideMethod: "fadeOut"
    };

    //删除按钮点击事件
    $(".delOrg").click(function () {
        let orgId = $("#orgId").val();
        let name = $("#orgName").val();
        $(".del_org_id").val(orgId);
        $(".del_message").text("是否确认删除组织'" + name + "'?");
    })

    //确认删除方法
    $(".delSure").click(function () {
        let id = $(".del_org_id").val();
        $.requestAjax({
                url: $appName + "/api/org/delete",
                type: "post",
                data: {"id": id},
                success: function (result) {
                    if (result.success) {
                        toastr.success(result.msg);
                        setTimeout(function () {
                            window.location.reload();//刷新当前页面.
                        }, 1500)
                    } else {
                        toastr.error(result.msg);
                    }

                }
            }
        )
    })
    //ztree 方法
    var setting = {
        view: {
            showLine: false
        },
        callback: {
            onClick: clickOrg
        },
        data: {
            simpleData: {
                enable: true
            }
        }
    };
    var nodesStr = $("#orgTreeData").val();
    var zNodes = JSON.parse(nodesStr);
    console.log("zNodes" + nodesStr)

    //ztree 节点点击方法
    function clickOrg(event, treeId, treeNode) {
        // alert("treeId:"+treeNode.id+",treeName:"+treeNode.name);

        $(".addSubOrg").removeClass("invisible");
        $(".delOrg").removeClass("invisible");
        $(".updateOrg").removeClass("invisible");
        $(".saveOrg").addClass(" invisible");
        let orgId = treeNode.id;
        //根据ID获取数据
        $.requestAjax({
                url: $appName + "/api/org/get",
                type: "post",
                data: {"id": orgId},
                success: function (result) {
                    if (result.success) {
                        let orgInfo = result.data;
                        $("#orgId").val(orgInfo.id);
                        $("#orgParentId").val(orgInfo.parentId);
                        $("#orgName").val(orgInfo.orgName);
                        $("#orgCode").val(orgInfo.orgCode);
                        $("#orgAddress").val(orgInfo.orgAddress);
                        $("#orgPhone").val(orgInfo.orgPhone);
                        $("#orgOrder").val(orgInfo.orgOrder);
                        $("#orgLevel").val(orgInfo.orgLevel);
                    } else {
                        toastr.error(result.msg);
                    }
                }
            }
        )
    };
    //组织保存 /修改 方法
    $("#orgInfoForm").bootstrapValidator({
        message: 'This value is not valid',
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            orgName: {
                message: '组织名称验证失败',
                validators: {
                    notEmpty: {
                        message: '组织名不能为空'
                    }
                }
            },
            orgLevel: {
                message: '组织层级验证失败',
                validators: {
                    notEmpty: {
                        message: '组织层级不能为空'
                    }
                }
            }
        }

    }).on('success.form.bv', function (e) {
        e.preventDefault();
        let orgInfo = {};
        orgInfo.id = $("#orgId").val();
        orgInfo.orgName = $("#orgName").val();
        orgInfo.orgCode = $("#orgCode").val();
        orgInfo.orgAddress = $("#orgAddress").val();
        orgInfo.orgPhone = $("#orgPhone").val();
        orgInfo.orgOrder = $("#orgOrder").val();
        orgInfo.orgLevel = $("#orgLevel").val();
        orgInfo.parentId = $("#orgParentId").val();
        $.requestJsonAjax({
                url: $appName + "/api/org/save",
                type: "post",
                data: orgInfo,
                success: function (result) {
                    // console.log("返回结果："+result)
                    if (result.success) {
                        toastr.success(result.msg);
                        setTimeout(function () {
                            window.location.reload();
                        }, 1500)
                    } else {
                        toastr.error(result.msg);
                    }

                }
            }
        )
    });

    //子组织表单验证保存 方法
    $("#subOrgInfoForm").bootstrapValidator({
        message: 'This value is not valid',
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            subOrgName: {
                message: '子组织名称验证失败',
                validators: {
                    notEmpty: {
                        message: '子组织名不能为空'
                    }
                }
            },
            subOrgLevel: {
                message: '组织层级验证失败',
                validators: {
                    notEmpty: {
                        message: '子组织层级不能为空'
                    }
                }
            }
        }

    }).on('success.form.bv', function (e) {
        e.preventDefault();
        let orgInfo = {};
        orgInfo.orgName = $("#subOrgName").val();
        orgInfo.orgCode = $("#subOrgCode").val();
        orgInfo.orgAddress = $("#subOrgAddress").val();
        orgInfo.orgPhone = $("#subOrgPhone").val();
        orgInfo.orgOrder = $("#subOrgOrder").val();
        orgInfo.orgLevel = $("#subOrgLevel").val();
        orgInfo.parentId = $("#orgId").val();
        $.requestJsonAjax({
                url: $appName + "/api/org/save",
                type: "post",
                data: orgInfo,
                success: function (result) {
                    // console.log("返回结果："+result)
                    if (result.success) {
                        toastr.success(result.msg);
                        setTimeout(function () {
                            window.location.reload();
                        }, 1500)
                    } else {
                        toastr.error(result.msg);
                    }

                }
            }
        )
    });

    //新增子组织按钮触发事件
    $(".addSubOrg").on("click", function () {
        $(".addSubOrg").addClass(" invisible");
        $("#subOrgInfo").removeClass("invisible");
    });
    //子组织取消按钮触发事件
    $(".cancelSubOrg").on("click", function () {
        $("#subOrgInfo").addClass(" invisible");
        $(".addSubOrg").removeClass("invisible");
        $("#subOrgName").val("");
        $("#subOrgCode").val("");
        $("#subOrgAddress").val("");
        $("#subOrgPhone").val("");
        $("#subOrgOrder").val("");
        $("#subOrgLevel").val("");
    });
    //全部展开树
    $(".expandAll").on("click", function () {
        var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
        treeObj.expandAll(true);
    })
    //全部展开树
    $(".pickupAll").on("click", function () {
        var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
        treeObj.expandAll(false);
    })
    $(document).ready(function () {
        $.fn.zTree.init($("#treeDemo"), setting, zNodes);
    });

</script>
</html>